import Taro, { Current } from '@tarojs/taro'
import { getCurrentInstance } from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View, Image, Text, Swiper, SwiperItem } from '@tarojs/components'
import { AtTextarea, AtRate, AtCheckbox } from 'taro-ui'
import CTopbar from '@/components/CTopBar/index'
import { course_detail_api } from './service'
import { add_commit_api } from './service'
import './index.scss'
import GetTopBarInfo from '@/utils/GetTopBarInfo' //动态高度
/**
 * 我的课程 评论页面
 */
type I = {
  course_id: number
  value: string
  ratevalue: number
  data: any
  checkedList: any
  checkboxOption: any
}

interface Evaluate {
  state: I
}
class Evaluate extends PureComponent<any> {
  constructor(props) {
    super(props)
    this.state = {
      course_id: 0,
      value: '',
      ratevalue: 0,
      data: {},
      checkedList: [],
      checkboxOption: [
        {
          value: 'anonymous',
          label: '匿名提交',
          desc: '',
        },
      ],
    }
  }

  componentWillMount() {
    const { id } = Current.router?.params

    this.setState(
      {
        course_id: Number(id),
      },
      () => {
        this.get_course_detail()
      },
    )
  }
  get_course_detail() {
    const { course_id } = this.state
    course_detail_api(course_id).then(({ result, data }) => {
      if (data) {
      }
      this.setState({
        data,
      })
    })
  }

  handleChange(value) {
    this.setState({
      value,
    })
  }
  handleRateChange(value) {
    this.setState({
      ratevalue: value,
    })
  }
  handleCheckboxChange(value) {
    this.setState({
      checkedList: value,
    })
  }

  submit() {
    const { course_id, value, checkedList, ratevalue } = this.state
    const commentId = course_id
    const comment = value
    const isAnonymous = checkedList.indexOf('anonymous') === 0 ? 1 : 0
    const satisfaction = ratevalue
    // 2代表线上课程
    const type = 2
    add_commit_api(commentId, comment, isAnonymous, satisfaction, type).then(({ result, data, message }) => {
      if (result < 0) {
        Taro.showToast({
          title: message,
          icon: 'none',
          duration: 2000,
        })
      } else {
        Taro.showToast({
          title: '评论成功！',
          icon: 'success',
          duration: 2000,
        })
      }

      this.setState({
        value: '',
        ratevalue: 0,
        checkedList: [],
      })
    })
  }
  // 下拉触底
  onReachBottom() {}

  render() {
    const { data = {}, checkboxOption, value, ratevalue, checkedList } = this.state

    return (
      <View className='pagewrap' style={{ paddingTop: `${GetTopBarInfo().TopBarHeight}px` }}>
        <View className='header'>
          <CTopbar title={data.courseName} showBack></CTopbar>
        </View>
        <View className='contnet'>
          <View className='card_wrapper'>
            <Image src={data.courseImg}></Image>
            <View className='card_right'>
              <Text className='card_title'>{data.courseName}</Text>
              <View className='card_middle'>
                <Text>{data.courseNumber}</Text>
                <Text>节课 | {data.courseTypeName}</Text>
              </View>
              <View className='card_content'>
                <Text className='card_content_text'>{data.courseSubtitle}</Text>
              </View>
            </View>
          </View>

          <View className='comment_wrapper'>
            <Text>留言区</Text>
            <View className='comment_input'>
              <AtTextarea
                value={value}
                onChange={this.handleChange.bind(this)}
                maxLength={150}
                placeholder='您购买的课程是否满足您的期待？感觉如何？给悦悦小姐姐留个言，说说您的感受吧～'
              />
            </View>
            <View className='comment_rate'>
              <Text>满意度</Text>
              <AtRate size={25} value={ratevalue} onChange={this.handleRateChange.bind(this)} />
            </View>

            <View className='comment_checkbox'>
              <AtCheckbox options={checkboxOption} selectedList={checkedList} onChange={this.handleCheckboxChange.bind(this)} />
            </View>
          </View>
        </View>

        <View className='submit'>
          <Text className='submit_text' onClick={this.submit.bind(this)}>
            提 交
          </Text>
        </View>
      </View>
    )
  }
}

export default Evaluate
